<template>
    <el-container class="home_container">
        <el-header class="home_header">
            <div class="home_title">云职位-求职人员</div>
            <!-- 退出登录 -->
            <div class="home_userinfoContainer">
                <el-dropdown>
                  <span class="el-dropdown-link home_userinfo">
                    {{resume.name}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>

            <el-aside class="home_aside" width="200px">

                <el-menu router>
                <el-menu-item index="/recruitment" :class="$route.path=='/recruitment'?'is-active':''">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">职位信息</span>
                    </el-menu-item>

                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-user"></i>个人信息</template>
                        <el-menu-item index="/resumeMessage">
                            <i class="el-icon-folder-add"></i>简历信息
                        </el-menu-item>
                        <el-menu-item index="/resumeEducation">
                            <i class="el-icon-document-copy"></i>学历信息
                        </el-menu-item>
                    </el-submenu>

                <!--     <el-submenu index="2">
                        <template slot="title"><i class="el-icon-s-home"></i>公司模块</template>
                        <el-menu-item index="/">
                            <i class="el-icon-folder-add"></i>公司信息
                        </el-menu-item>
                        <el-menu-item index="/">
                            <i class="el-icon-document-copy"></i>相关人员
                        </el-menu-item>
                    </el-submenu> -->

                    <el-menu-item index="/mynews">
                        <i class="el-icon-chat-dot-round"></i>
                        <span slot="title">我的消息</span>
                    </el-menu-item>
                </el-menu>

            </el-aside>

            <el-container>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view></router-view>
                </el-main>
                <el-footer class="home_footer">2022 © 云职位</el-footer>
            </el-container>

        </el-container>

    </el-container>
</template>
<script>
    export default{
        methods: {
            logout(){
                let _this = this;
                this.$confirm('注销登录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    localStorage.removeItem('login')
                    _this.$router.replace({path: '/'})
                })
            }
        },
        data(){
            return {
               resume:''
            }
        },
        created() {
            let  resume= JSON.parse(window.localStorage.getItem('resume'))
            this.resume = resume
        }
    }
</script>
<style>
    .home_container {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    .home_header {
        background-color: #2B2B2B;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .home_title {
        color: #C2C2C2;
        font-size: 22px;
        display: inline;
    }

    .home_userinfo {
        color: #fff;
        cursor: pointer;
    }

    .home_userinfoContainer {
        display: inline;
        margin-right: 20px;
    }

    .home_aside {
        background-color: #FFFFFF;
    }

    .home_footer {
        background-color: #FFFFFF;
        color: #000000;
        font-size: 18px;
        line-height: 60px;
        text-align: center;
    }
</style>
